<template>
  <div class="add-form">
    <div class="nb-tittle">{{ title }}</div>
    <el-form ref="form" :model="data" inline label-width="100px" hide-required-asterisk class="hx-form" :rules="rules">
      <el-row>
        <el-col>
          <el-form-item label="资质名称：" prop="cert_name">
            <el-input v-model="data.cert_name" class="detail-input" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="产品名称：" prop="production_name">
            <el-input v-model="data.production_name" class="detail-input" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="发证机构：" prop="certifying_authority">
            <el-input v-model="data.certifying_authority" class="detail-input" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="颁发日期：" prop="issuance_date">
            <el-date-picker
              v-model="data.issuance_date"
              type="date"
              placeholder="选择日期"
              style="width: 240px"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="资质编号：" prop="cert_code">
            <el-input v-model="data.cert_code" class="detail-input" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="截止日期：" prop="expiration_date">
            <el-date-picker
              v-model="data.expiration_date"
              type="date"
              placeholder="选择日期"
              style="width: 240px"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-row>
          <el-col>
            <el-form-item v-if="editId" label="上传附件：">
              <Adjunct table_name="cert" :pk="editId" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-row>
      <el-form-item style="margin:40px 20px 0">
        <el-button type="primary" @click="submitForm('form')">提交</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import API from '@/api/cert/cert'
import Adjunct from '@/components/Upload/Adjunct'
export default {
  inject: ['goUrl', 'isEdit', 'update', 'setStorage', 'clearStorage', 'getStorage'],
  components: { Adjunct },
  data() {
    return {
      data: {
        id: null
      },
      title: '',
      editId: null,
      value: '',
      fileList: [],
      rules: {
        cert_name: { required: true, message: '请输入公司资质', trigger: 'change' },
        production_name: { required: true, message: '请输入产品名称', trigger: 'change' },
        certifying_authority: { required: true, message: '请输入发证机构', trigger: 'change' },
        issuance_date: { required: true, message: '请选择颁发日期', trigger: 'change' },
        cert_code: { required: true, message: '资质编号', trigger: 'change' },
        expiration_date: { required: true, message: '截止日期', trigger: 'change' }
      }
    }
  },
  created() {
    const edit = this.isEdit()
    if (edit) {
      this.title = '公司资质详情'
      this.editId = edit
      this.info()
    } else {
      this.title = '新增公司资质'
      if (this.getStorage('cert')) {
        this.data = this.getStorage('cert')
      }
    }
  },
  mounted() {
    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
  },
  methods: {
    info() {
      API.detail(this.editId).then(res => {
        this.data = res.data
      })
    },
    beforeunloadHandler(e) {
      this.clearStorage('cert')
    },
    cancel() {
      if (!this.editId) {
        this.setStorage('cert', this.data)
      }
      this.goUrl('/cert')
    },
    add() {
      API.create(this.data).then(res => {
        const id = res.data.res
        this.editId = id - 0
        if (res.data.error_code !== 1) {
          this.$message.error(res.data.message)
        } else {
          this.$message.success('新增成功')
        }
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.editId) {
            this.data.id = this.editId
            this.update(API, this.data, '更新成功')
          } else {
            this.add()
            this.clearStorage('cert')
          }
        } else {
          console.log('error submit!')
          return false
        }
      })
    }
  }
}
</script>

